@charset "utf-8";
//引入common公共部分
@import "common";

section{
    @include sectionCss;
    padding: 0 r(20);
    .searchBar{
        @include searchBar;
        width: r(286);
        margin: auto;
    }
    h1{
        text-align: center;
        font-size: half(24);
        font-weight: 100;
        margin: half(20) 0;
    }
    
    .multiplexing{
        width: r(532);
        margin: 0 auto r(28)/3;
        font-size: half(20);
        span{
            @include spanComm1;
            width: r(126);
            height: half(63);
            margin-left: r(28)/3;
            background-color: #dcdcdc;
            line-height: half(63);
            &:first-child{
                margin-left: 0;
            }
        }
    }
    
    .marginComm{
        width: r(710);
        margin: half(20) 0;
        font-size: 0;
    }
    .hotSearch{
        @extend .marginComm;
        .hotFoot1,.hotFoot2,.hotFoot3,.hotFoot4{
            overflow: hidden;
            img{
                width: 100%;
            }
        }
        .hotFoot1,.hotFoot2,.hotFoot3{
            img{
                transform: translateY(-10%);
            }
        }
        .hotFoot1{
            width: r(279);
            height: r(354);
        }
        .hotFoot2{
            width: r(420);
            height: r(147);
            margin-left: r(11);
            margin-bottom: r(10);
        }
        .hotFoot3{
            width: r(197);
            height: r(197);
            margin-left: r(11);
        }
        .hotFoot4{
            width: r(213);
            height: r(197);
            margin-left: r(10);
            img{
                transform: translateY(-15%);
            }
        }
    }
    .recommend{
        @extend .marginComm;
        .recommendImg{
            width: r(226);
            height: r(199);
            overflow: hidden;
            margin-left: r(16);
            &:first-child{
                margin-left: 0;
            }
            img{
                width: 140%;
                display: block;
                margin: auto;
                transform: translateX(-18%);
            }
        }
    }
}